<template>
	<div class="wrap">
		<div class="page-title">
			<h3>全局配置</h3>
		</div>
		<div class="table-wrap">
			<table>
				<thead class="thead-bottom-line">
					<tr>
						<th style="width: 1200px;" colspan="4">设置
							<ul class="titile-butn">
								<li  v-on:click.stop="setglbal()" >
									<img :src="`/static/${themeColor}-img/bule_sure.png`">
									<span>确定</span>
								</li>
							</ul>
                        </th>
					</tr>
				</thead>
				<tbody>
					<!-- <tr>
						<td >PPPOE开关：</td>
                        <td >
                        	 <div class="on_off_but">							
								<button @click.stop = "swichStatus('PPOEs',1)" :class="[PPOEs?'btn-active':'']" class="on_but">启用</button>
								<button @click.stop = "swichStatus('PPOEs',0)" :class="[PPOEs?'':'btn-active']" class="off_but">禁用</button>
							</div>
                        </td>			
						<td ></td>
                        <td ></td>			
					</tr> -->
					<tr>
						<td >DHCP开关：</td>
                        <td >
                        	 <div class="on_off_but">							
								<button @click.stop = "swichStatus('DHCPs',1)" :class="[DHCPs?'btn-active':'']" class="on_but">启用</button>
								<button @click.stop = "swichStatus('DHCPs',0)" :class="[DHCPs?'':'btn-active']" class="off_but">禁用</button>
							</div>
                        </td>			
						<td ></td>
                        <td ></td>				
					</tr>
					<tr>
						<td >首选DNS服务器：</td>
                        <td >
							<ipinput class="DNS" :empty="false"></ipinput>
							<span class="mi">* 必填</span>
						</td>							
						<td ></td>
                        <td ></td>			
					</tr>
					<tr>
						<td >备选DNS服务器：</td>
                        <td >
							<ipinput class="DNS2" :empty="false"></ipinput>
							<span class="mi">* 必填</span>
						</td>						
						<td ></td>
                        <td ></td>			
					</tr>
                    <tr>					
						<td >DHCP地址租期：</td>
                        <td colspan="2">
							<input v-model="days" type="number" min="1" max="999" step="1" class="days shakeInput NUM num-input short-input" @blur="testVal('.days', 'vlanid')" @focus="noEmpty('.days')"></input><span>日</span>
							<input v-model="hours" type="number" min="1" step="1" max="23" class="hours shakeInput NUM num-input short-input" @blur="testVal('.hours', 'vlanid')" @focus="noEmpty('.hours')" ></input><span>时</span>
							<input v-model="minus" type="number" min="1" step="1" max="59" class="minus shakeInput NUM num-input short-input" @blur="testVal('.minus', 'vlanid')" @focus="noEmpty('.minus')" ></input><span>分</span>
							<span class="red">* DHCP开关启用时租期不能设为0</span>
						</td>			
                        <td ></td>		
					</tr>
					<tr>					
						<td >主机信息表有效时间：</td>
                        <td >
							<input v-model="rtime" type="number" min="1" step="1" max="99999999" @blur="testVal('.rtime', 'int')" @focus="noEmpty('.rtime')"  class="rtime num-input">(s)</input>
							<span class="mi">* 必填</span>
						</td>			
						<td ></td>
                        <td ></td>		
					</tr>
					<tr>
						<td >真实IP访问开关：</td>
						<td >
							<div class="on_off_but">							
								<button @click.stop = "swichStatus('rips',1)" :class="[rips?'btn-active':'']" class="on_but">启用</button>
								<button @click.stop = "swichStatus('rips',0)" :class="[rips?'':'btn-active']" class="off_but">禁用</button>
							</div>
                        </td>
						<td ></td>
                        <td ></td>							
					</tr>
                    <tr>					
						<td >主机自动封堵开关：</td>
						<td >
							<div class="on_off_but">							
								<button @click.stop = "swichStatus('hoststops',1)" :class="[hoststops?'btn-active':'']" class="on_but">启用</button>
								<button @click.stop = "swichStatus('hoststops',0)" :class="[hoststops?'':'btn-active']" class="off_but">禁用</button>
							</div>
                        </td>
						<td ></td>
                        <td ></td>	
					</tr>
                    <tr>					
						<td >虚拟IP变换间隔：</td>
						<td >
                            <input v-model="vipchg" type="number" min="1" step="1" max="9999" @focus="noEmpty('.vipchg')"
							@blur="testVal('.vipchg', 'int')" class="vipchg num-input">(m)</input>
							<span class="mi">* 必填</span>
						</td>
						<td ></td>
                        <td ></td>	
					</tr>
                    <tr>					
						<td >虚拟域名变换间隔：</td>
						<td >
                             <input v-model="vdomianchg" type="number" min="1" step="1"  @focus="noEmpty('.vdomianchg')"
							 @blur="testVal('.vdomianchg', 'int')"  class="vdomianchg num-input">(m)</input>
							 <span class="mi">* 必填</span>
						</td>
						<td ></td>
                        <td ></td>	
					</tr>
                    <tr>					
						<td >虚拟网络变换间隔：</td>
						<td >
                             <input v-model="vnetchg" type="number" min="1" step="1"  @focus="noEmpty('.vnetchg')"
							 @blur="testVal('.vnetchg', 'int')" class="vnetchg num-input">(m)</input>
							 <span class="mi">* 必填</span>
						</td>
						<td ></td>
                        <td ></td>	
					</tr>
					<tr>					
						<td >MGT1管理IP/掩码：</td>
						<td >
							 <mgipinput class="manageIP1" :empty="false"></mgipinput>
							 <span class="mi">* 必填</span>
						</td>
						<td ></td>
                        <td ></td>	
					</tr>
					<tr>					
						<td >MGT2管理IP/掩码：</td>
						<td >
							 <mgipinput class="manageIP2" :empty="false"></mgipinput>
							 <span class="mi">* 必填</span>
						</td>
						<td ></td>
                        <td ></td>	
					</tr>
				</tbody>
			</table>
		</div>
		<Modals :id="'gconfirm'" :status="'other'" @modalEvent ="openNewaddr()">
			<div slot="modal_content">
				<div class="msg">“管理IP”改变，点击“确认”后，本页面将失效。</br>
					若无新窗口弹出，请访问如下地址：
				</div>
				<div class="addr">{{ newhref }}</div>
			</div>
		</Modals>
	</div>
</template>
<script>
	import NetService from 'services/netService'
	import formatTest from 'libs/formatTest'
	import ipinput from 'components/libs/ipinput'
	import mgipinput from 'components/libs/mgipinput'
	import Modals from 'components/common/Modals'

	export default {
		components: {
			Modals,
			ipinput,
			mgipinput
		},
        mounted() {
			this.getglbal();    			
        },
        data() {
            return {
				// PPOEs:"",
				DHCPs:"",
				DNS:"",
				DNS2:"",
				rtime:"",
				days:"1",
				hours:"1",
				minus:"1",
                exterips:"",
                rips:"",
                hoststops:"",
                vipchg:"",
                vdomianchg:"",
                vnetchg:"",
				manageIP:"",
				constIP:"",
				newhref:"",
				user:'',
				status:''
            }
        },
		watch: {
			days: function () {
				if (this.days > 999)
				this.days = 999
			},
			hours: function () {
				if (this.hours > 23) {
					this.days = Number(this.days) + 1;
					this.hours = 0
				}
			},
			minus: function () {
				if (this.minus > 59) {
					this.hours = Number(this.hours) + 1;
					this.minus = 0
				}
			},
			rtime: function () {
				if (this.rtime > 99999999) {
					this.rtime = 99999999
				}
			},
			vipchg: function () {
				if (this.vipchg > 999999) {
					this.vipchg = 999999
				}
			},
			vdomianchg: function () {
				if (this.vdomianchg > 999999) {
					this.vdomianchg = 999999
				}
			},
			vnetchg: function () {
				if (this.vnetchg > 999999) {
					this.vnetchg = 999999
				}
			},

		},
        methods: {
        	swichStatus(butn_type,on_off) {  
        		switch (butn_type) {
        			case 'PPOEs':
        			    this.PPOEs = on_off
        				break;
        			case 'DHCPs':
	        			this.DHCPs = on_off
	        			break
        			case 'exterips':
        			    this.exterips = on_off
        			    break
        			case 'rips':
        			    this.rips = on_off
        			    break
        			case 'hoststops':
        			    this.hoststops = on_off
        			    break
        			default:
        				break;
        		}
        	},
			arrip(el,value) {
				let arrip=value.split('.')
				$(el + ' input').eq(0).val(arrip[0])
				$(el + ' input').eq(1).val(arrip[1])
				$(el + ' input').eq(2).val(arrip[2])
				$(el + ' input').eq(3).val(arrip[3])
			},
			arrmgip(el,value) {
				let arrip = value.split('.')
				$(el + ' input').eq(0).val(arrip[0])
				$(el + ' input').eq(1).val(arrip[1])
				$(el + ' input').eq(2).val(arrip[2])
				let mgarrip = arrip[3].split('/')
				$(el + ' input').eq(3).val(mgarrip[0])
				$(el + ' input').eq(4).val(mgarrip[1])
			},
			getglbal() {
				NetService.getGlobal()
					.then((res) => {
						if (res.errcode === 0) {
							this.DHCPs = res[1]  == "1" ? true : false
							// 首选，备选DNS
							let dns = res[2].split('|')
							this.arrip('.DNS',dns[0])
							this.arrip('.DNS2',dns[1])

							// DHCP地址租期
							let stamp = res[3]
							this.days = parseInt(stamp / ( 24 * 60 * 60))
							let remain = stamp % ( 24 * 60 * 60)
							this.hours = parseInt(remain / ( 60 * 60 ))
							remain = remain % ( 60 * 60 )
							this.minus = parseInt(remain / 60)

							// 主机信息表有效时间
							this.rtime = res[4]

							// 真实IP访问开关
							this.rips = res[5] == "1" ? true : false

							// 主机自动封堵开关
							this.hoststops = res[6] == "1" ? true : false

							let virtualIP = res[7].split('|')
							// 虚拟IP变换间隔
							this.vipchg = virtualIP[0]
							// 虚拟域名变换间隔
							this.vdomianchg = virtualIP[1]
							// 虚拟网络变换间隔
							this.vnetchg = virtualIP[2]

							// MGT管理口 IP/掩码
							let mgtip = res[8].split('|')
							this.arrmgip('.manageIP1', mgtip[0])
							if (mgtip[1]) {
								this.arrmgip('.manageIP2', mgtip[1])
							}
							this.user = mgtip[2]
							this.constIP = mgtip[mgtip[2] - 1]
							// this.exterips = res.data.config.wip_response == "1" ? true : false
						}
					})
       		},
			ipVal(ele) {
				let ipVal = $(ele + ' .ip_a').val() + "." + 
							$(ele + ' .ip_b').val() + "." + 
							$(ele + ' .ip_c').val() + "." + 
							$(ele + ' .ip_d').val()
				return ipVal
			},
			mgipVal(ele) {
                let ipVal =  $(ele + ' .ip_a').val() + "." + 
				             $(ele + ' .ip_b').val() + "." + 
							 $(ele + ' .ip_c').val() + "." + 
							 $(ele + ' .ip_d').val() + "/" + 
							 $(ele + ' .ip_e').val()
			    return ipVal
			},
			testIp(ele) {								
				let ip_a = $(ele).find('.ip_a').val()
				let ip_b = $(ele).find('.ip_b').val()
				let ip_c = $(ele).find('.ip_c').val()
				let ip_d = $(ele).find('.ip_d').val()
				let val = ip_a + "." + ip_b + "." + ip_c + "." + ip_d
				let reg = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/

				if (reg.test(val)) {
					return true
				} else {
					$(ele).addClass('error_foramt').addClass('animated shake')
					setTimeout(()=> {
						$(ele).removeClass('animated shake')
					}, 200)
					return false
				}	
			},
			setglbal() {
				let DNS=this.ipVal('.DNS')
				let DNS2=this.ipVal('.DNS2')
				let dhcp_time = this.days * ( 24 * 60 * 60) + this.hours * ( 60 * 60 ) + this.minus * 60 ;
				if (this.DHCPs) {
					if (dhcp_time>0) {
						let days=this.testVal('.days', 'vlanid')
						let hours=this.testVal('.hours', 'vlanid')
						let minus=this.testVal('.minus', 'vlanid')
						let status=days&&hours&&minus
						if (!status) {
							return
						}
					} else {
						$('.shakeInput').css('border', '1px solid #b63039')
						$('.shakeInput').addClass('animated shake')
						return
					}
				} else {
					if (dhcp_time !== 0) {
						let days = this.testVal('.days', 'vlanid')
						let hours = this.testVal('.hours', 'vlanid')
						let minus = this.testVal('.minus', 'vlanid')
						let status = days && hours && minus
						if (!status) {
							return
						}
					}
				}
				let status = this.testIp('.DNS') && 
							this.testIp( '.DNS2') && 
							this.testVal('.rtime', 'int') && 
							this.testVal('.vipchg', 'int') && 
							this.testVal('.vdomianchg', 'int') && 
							this.testVal('.vnetchg', 'int') &&
							this.testmanageIP('.manageIP1')
				
				if (this.mgipVal('.manageIP2')) {
					status = status&&this.testmanageIP('.manageIP2')
				}			
				if (status) {
					this.noshock(".NUM")
					// let gconfig = {
					// 	pppoe_switch:this.PPOEs ? 1 : 0,
                    //     dhcp_switch:this.DHCPs ? 1 : 0,
                    //     dnsABCD:DNS,
                    //     dnsABCD2:DNS2,
                    //     rip_access:this.rips ? 1 : 0,
                    //     wip_response:this.exterips ? 1 : 0,
                    //     host_status_switch:this.hoststops ? 1 : 0,
                    //     ai:this.vipchg,
                    //     rtime:this.rtime,
                    //     alter_name:this.vdomianchg,
                    //     alter_virtual_host:this.vnetchg,
                    //     mgr_address:this.mgipVal('.manageIP1'),
                    //     mgr_address2:this.mgipVal('.manageIP2'),
                    //     dhcp_time:dhcp_time
					// }
					let dhcp_time = this.days * ( 24 * 60 * 60) + this.hours * ( 60 * 60 ) + this.minus * 60 ;
					let params = {
						1: this.DHCPs ? 1 : 0,
						2: [this.ipVal('.DNS'), this.ipVal('.DNS2')].join('|'),
						3: dhcp_time,
						4: this.rtime,
						5: this.rips ? 1 : 0,
						6: this.hoststops ? 1 : 0,
						7: [this.vipchg, this.vdomianchg, this.vnetchg].join('|'),
						8: [this.mgipVal('.manageIP1'), this.mgipVal('.manageIP2')].join('|')
					}
					let constIP = this.constIP.split("/")[0]
					if (this.user === '1') {
						let manageIP = this.mgipVal('.manageIP1').split("/")[0]
						if (constIP !== manageIP) {
							this.newhref = location.protocol+"//"+manageIP+"/"
							$("#gconfirm").modal('show')
						} else {
							this.dosetGlobal(params)
						}
					} else {
						let manageIP = this.mgipVal('.manageIP2').split("/")[0]
						if (constIP !== manageIP) {
							this.newhref = location.protocol+"//"+manageIP+"/"
							$("#gconfirm").modal('show')
						} else {
							this.dosetGlobal(params)
						}
					}
					
				}
			},
			openNewaddr() {
				window.open(this.newhref);
				let dhcp_time = this.days * ( 24 * 60 * 60) + this.hours * ( 60 * 60 ) + this.minus * 60 ;
				let params = {
					1: this.DHCPs ? 1 : 0,
					2: [this.ipVal('.DNS'), this.ipVal('.DNS2')].join('|'),
					3: dhcp_time,
					4: this.rtime,
					5: this.rips ? 1 : 0,
					6: this.hoststops ? 1 : 0,
					7: [this.vipchg, this.vdomianchg, this.vnetchg].join('|'),
					8: [this.mgipVal('.manageIP1'), this.mgipVal('.manageIP2')].join('|')
				}
				this.dosetGlobal(params)
			},
			dosetGlobal(params) {
				this.status = "ing"
				NetService.setGlobal(params)
					.then((res) => {
						if (res.errcode === 0) {
							this.status = "ok"
							this.$Message.success({
								closable: true,
								content: '设置成功！',
								duration: 5
							})
							this.getglbal()
						} else {
							this.status = "error"
						}
					})
			},
			testmanageIP(ele) {
				let reg = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)(\/(\d|[1-2]\d|3[0-2]))$/
				let val = this.mgipVal(ele)
				if (val!='') {//去除前后空格
					val = val.replace(/(^\s*)|(\s*$)/g, "")			
				} else {
					$(ele).parent().find('.mi').css('color', '#b63039')
				}
				if (reg.test(val)) {				
					return true		
				} else {
					$(ele).addClass('animated shake').addClass("error_foramt")
					setTimeout(function() {
						$(ele).removeClass('animated shake')
					}, 200)
					return false
				}
			},
			
			testVal(ele, reg) {
				let val = $(ele).val()
				let test = new formatTest(ele, reg, false)
				return test.testFormat()
			},
			testValnull(ele, reg) {
				let val = $(ele).val()
				let test = new formatTest(ele, reg, true)
				return test.testFormat()
			},
			isEmpty(ele) {
                let test = new formatTest(ele)
			    test.isEmpty()
			},
			noEmpty(ele) {
				let test = new formatTest(ele)
			    test.notEmpty()
			},
			shock(ele) {
                $(ele).parent().find('.mi').css('color', '#b63039')
				$(ele).css('border', '1px solid #b63039')
				$(ele).addClass('animated shake')
				setTimeout(function() {
					$(ele).removeClass('animated shake')
				}, 200)
            },
            noshock(ele) {
                $(ele).css('border', '1px solid #e8e8e8')
            }
        }
		
	}
    
</script>
<style scoped lang="less">
	.wrap {
		margin: 30px 0 0 30px;
		padding-bottom: 20px;
		background: #FFFFFF;
	}
	.title {
		height: 30px;
		padding-left: 20px;
	}
	.table-wrap{
		margin: 30px;
	}
    thead tr th {
        text-align: left;
        padding-left: 15px;
        height: 30px;
        position:relative;
	}
	table tbody{
		border: 1px solid #e4e4e4;
	}
    table tbody tr td{
		height: 55px;
		background: #ffffff;
		border: none;
    }
    tr:nth-child(4),
	tr:nth-child(6),
	tr:nth-child(13) {
        border-bottom: 1px solid #e4e4e4;
    }
	tr:nth-child(5) span {
        vertical-align: middle;
    }
    tbody tr td:nth-child(1) {
        text-align: right;
		width: 280px;
    }
    tbody tr td:nth-child(2) {
		text-align: left;
        padding-left: 42px;
		width: 350px;
    }
	tbody tr td:nth-child(3) {
        text-align: left;
    }
    .thead-btn {
		width: 70px;
		height: 20px;
		color: #FFFFFF;
		border-radius: 4px;
		background: #f5b72e;
        position:absolute; 
        right:20px;
	}
    .num-input{
        height: 25px;
        width: 100px;
        border: 1px solid #e6e6e6;
        border-radius: 5px;
        margin-right: 5px;
        padding: 3px;
    }
	.long-input{
		width: 130px;
	}
	.short-input{
		width: 50px;
	}
	label{
		margin-bottom: 0px;
	}
	.mi {
		color: #d2d2d2;
		margin-left: 10px;
	}
	.red{
		margin-left: 10px;
		color: #d2d2d2;
	}
	.titile-butn {
		position: absolute;
		top: 6px;
		right: 10px;
	}
	
	.titile-butn li {
		display: inline-block;
		margin-right: 15px;
		cursor: pointer;		
	}
	.msg{
		font-size: 15px;
		text-align: center;
		margin: 0 auto;
		padding-top: 20px;
	}
	.addr{
		font-size: 15px;
		text-align: center;
		margin: 0 auto;
		color: #69b6ff;
		padding-top: 10px;
	}
</style>